import { Tag } from 'lucide-react'

interface TaskTagProps {
  tags: string[]
  maxDisplay?: number
  showIcon?: boolean
  className?: string
}

function TaskTag({ 
  tags, 
  maxDisplay = 2, 
  showIcon = true, 
  className = '' 
}: TaskTagProps) {
  if (!tags || tags.length === 0) return null

  // 为不同标签分配不同颜色
  const tagColors = [
    'bg-blue-100 text-blue-700 border border-blue-200',
    'bg-green-100 text-green-700 border border-green-200',
    'bg-purple-100 text-purple-700 border border-purple-200',
    'bg-pink-100 text-pink-700 border border-pink-200',
    'bg-indigo-100 text-indigo-700 border border-indigo-200',
    'bg-teal-100 text-teal-700 border border-teal-200'
  ]

  return (
    <div className={`flex items-center gap-2 flex-wrap ${className}`}>
      {showIcon && (
        <Tag size={12} className="text-slate-400" />
      )}
      {tags.slice(0, maxDisplay).map((tag, index) => {
        const colorClass = tagColors[index % tagColors.length]
        
        return (
          <span 
            key={index}
            className={`px-2 py-1 text-xs rounded-full font-medium ${colorClass}`}
          >
            {tag}
          </span>
        )
      })}
      {tags.length > maxDisplay && (
        <span className="text-xs text-slate-400">
          +{tags.length - maxDisplay}
        </span>
      )}
    </div>
  )
}

export default TaskTag
